<template>
  <bs-dialog v-model="visible" :title="title" :width="800" :confirm-btn-fn="handleConfirm">
    <bs-form ref="formRef" class="form-area" :grid="2" :model="formData" :rules="rules">
      <bs-form-item label="设备名" prop="name">
        <bs-input v-model="formData.name" placeholder="请输入设备名"></bs-input>
      </bs-form-item>
      <bs-form-item label="管理地址" prop="manage_ip">
        <bs-input v-model="formData.manage_ip" placeholder="请输入管理地址"></bs-input>
      </bs-form-item>
      <bs-form-item label="网络架构" prop="framework_name">
        <bs-select v-model="formData.framework_name">
          <bs-option v-for="(item, index) in optionList.framework" :key="index" :value="item.value" :label="item.label"></bs-option>
        </bs-select>
      </bs-form-item>
      <bs-form-item label="供应商" prop="vendor_name">
        <bs-select v-model="formData.vendor_name">
          <bs-option v-for="(item, index) in optionList.vendor" :key="index" :value="item.value" :label="item.label"></bs-option>
        </bs-select>
      </bs-form-item>
      <bs-form-item label="设备角色" prop="role_name">
        <bs-select v-model="formData.role_name">
          <bs-option v-for="(item, index) in optionList.role" :key="index" :value="item.value" :label="item.label"></bs-option>
        </bs-select>
      </bs-form-item>
      <bs-form-item label="类型" prop="category_name">
        <bs-select v-model="formData.category_name">
          <bs-option v-for="(item, index) in optionList.category" :key="index" :value="item.value" :label="item.label"></bs-option>
        </bs-select>
      </bs-form-item>
      <bs-form-item label="所属机房" prop="room">
        <bs-select v-model="formData.room" @change="handleRoomChange">
          <bs-option v-for="(item, index) in optionList.room" :key="index" :value="item.value" :label="item.label"></bs-option>
        </bs-select>
      </bs-form-item>
      <bs-form-item label="模块" prop="model">
        <bs-select v-model="formData.model"  @change="handleModelChange">
          <bs-option v-for="(item, index) in optionList.model" :key="index" :value="item.value" :label="item.label"></bs-option>
        </bs-select>
      </bs-form-item>
      <bs-form-item label="机柜" prop="rack_name">
        <bs-select v-model="formData.rack_name">
          <bs-option v-for="(item, index) in optionList.rack" :key="index" :value="item.value" :label="item.label"></bs-option>
        </bs-select>
      </bs-form-item>
      <bs-form-item label="网络区域" prop="netzone_name">
        <bs-select v-model="formData.netzone_name">
          <bs-option v-for="(item, index) in optionList.netzone" :key="index" :value="item.value" :label="item.label"></bs-option>
        </bs-select>
      </bs-form-item>
      <bs-form-item label="SN号" prop="serial_num">
        <bs-input v-model="formData.serial_num" placeholder="请输入SN号"></bs-input>
      </bs-form-item>
      <bs-form-item label="U位置" prop="u_location">
        <div class="input-wrap">
          <div class="input-item">
            <bs-input v-model="formData.u_location_start" placeholder="起始位置"></bs-input>
          </div>
          <div class="input-item">
            <bs-input v-model="formData.u_location_end" placeholder="结束位置"></bs-input>
          </div>
        </div>
      </bs-form-item>
      <bs-form-item label="网络属性" prop="attribute_name">
        <bs-select v-model="formData.attribute_name">
          <bs-option v-for="(item, index) in optionList.attr" :key="index" :value="item.value" :label="item.label"></bs-option>
        </bs-select>
      </bs-form-item>
      <bs-form-item label="设备状态" prop="status">
        <bs-select v-model="formData.status">
          <bs-option v-for="(item, index) in optionList.status" :key="index" :value="item.value" :label="item.label"></bs-option>
        </bs-select>
      </bs-form-item>
      <bs-form-item label="数据采集" prop="auto_enable">
        <bs-select v-model="formData.auto_enable">
          <bs-option v-for="(item, index) in enableOptions" :key="index" :value="item.value" :label="item.label"></bs-option>
        </bs-select>
      </bs-form-item>
      <bs-form-item label="备注信息" prop="">
        <bs-input v-model="formData.memo" type="textarea" placeholder="请输入备注信息"></bs-input>
      </bs-form-item>
    </bs-form>
  </bs-dialog>
</template>
<script lang="ts" setup>
import {ref, nextTick} from 'vue'
import {useOption} from '../../hooks/network'
import * as API from '@/service/modules/resource'
import {ElMessage, FormItemRule} from 'element-plus'

const emit = defineEmits(['confirmed'])
const enableOptions = [{
  value: true,
  label: '是'
}, {
  value: false,
  label: '否'
}]

const initFormData = () => ({
  /**设备名 */
  name: '',
  /**管理ip */
  manage_ip: '',
  // 序列号 
  serial_num: '',
  // 网络架构
  framework_name: '',
  // 供应商
  vendor_name: '',
  // 类型
  category_name: '',
  // 型号
  model_name: '',
  // 网络属性
  attribute_name: '',
  // 机房
  room: '',
  // 模块
  model: '',
  // 机柜
  rack_name: '',
  // U位
  u_location_start: '',
  u_location_end: '',
  // 角色
  role_name: '',
  // 区域
  netzone_name: '',
  // 状态
  status: '',
  auto_enable: '',
  memo: ''
})

const rules:Record<string, FormItemRule[]> = {
  name: [{required: true, message: '请输入设备名'}],
  manage_ip: [{required: true, message: '请输入管理地址'}],
  serial_num: [{required: true, message: '请输入序列号'}],
  framework_name: [{required: true, message: '请选择网络架构'}],
  vendor_name: [{required: true, message: '请选择供应商'}],
  category_name: [{required: true, message: '请选择类型'}],
  model_name: [{required: true, message: '请选择型号'}],
  attribute_name: [{required: true, message: '请选择网络属性'}],
  room: [{required: true, message: '请选择机房'}],
  model: [{required: true, message: '请选择模块'}],
  rack_name: [{required: true, message: '请选择机柜'}],
  role_name: [{required: true, message: '请选择角色'}],
  netzone_name: [{required: true, message: '请选择区域'}],
  status: [{required: true, message: '请选择设备状态'}],
  u_location: [{required: true, message: '请输入u位置', validator: (_rule, _value, callback) => {
    if (!formData.value.u_location_start || !formData.value.u_location_end) {
      return callback(new Error('请输入u位置'))
    } else {
      return callback()
    }
  }}]
}
const formRef = ref()
const visible = ref(false)
const title = ref('')
const info = ref()
const formData = ref(initFormData())
const {optionList, getOptionList, getModelOption, getRackOption, clearOption} = useOption()

const handleRoomChange = (val:any, isInit?: boolean) => {
  if (!isInit) {
    formData.value.model = ''
    formData.value.rack_name = ''
    clearOption('model')
    clearOption('rack')
  }
  if (val) {
    getModelOption({datacenterss: val})
  }
}

const handleModelChange = (val:any, isInit?:boolean) => {
  if (!isInit) {
    formData.value.rack_name = ''
    clearOption('rack')
  }
  if (val) {
    getRackOption({datacenterss: formData.value.room, models: val})
  }
}

/**
 * 打开弹框
 */
const open = (item?:any) => {
  info.value = item
  if (item) {
    title.value = '资产数据维护'
    formData.value = {
      ...initFormData(),
      ...item
    }
    handleRoomChange(formData.value.room, true)
    handleModelChange(formData.value.model, true)
  } else {
    title.value = '资产数据录入'
    formData.value = initFormData()
  }
  visible.value = true
  nextTick(() => {
    setTimeout(() => {
      formRef.value.clearValidate()
    })
  })
}

/**
 * 确定
 */
const handleConfirm = async () => {
  await formRef.value.validate()
  // 编辑维护
  if (info.value) {
    await API.updateResource({
      cc: 'net-device',
      res_id: info.value.id
    }, {
      ...formData.value
    })
    ElMessage.success('资产数据维护成功')
  } else { // 新增
    await API.addResource({
      cc: 'net-device'
    }, {
      ...formData.value
    })
    ElMessage.success('资产数据录入成功')
  }
  emit('confirmed')
}

const init = () => {
  getOptionList()
}

init()
defineExpose({
  open
})

</script>
<style lang="scss" scoped>
.form-area {
  padding: 16px;
  .input-wrap {
    display: flex;
    justify-content: space-between;
    .input-item {
      width: calc(50% - 4px)
    }
  }
}
</style>
